<div th:fragment="control_table_top">
<script type="text/javascript">
	var get_top_table_option = function()
	{
		return {
			columns : [ {
				field : "NAME",
				data : [ "1月", "2月", "3月" ]
			}, {
				field : "SUMVALUE",
				data : [ 100, 90, 80 ]
			} ],
			rows : 3,
			sql : ""
		};
	}

	function metadata_toptable(params)
	{
		var opt = get_top_table_option();
		params = $.extend({}, {
			COLUMN : {},
			SQL : "",
			OPTION : opt
		}, params);
		return $.extend(new metadata_chart_base(params), this);
	}

	function metadata_view_toptable(control)
	{
		this.COLUMN = function()
		{
			var _this = this;
			var view = $($("#TOPTABLECOLUMNS").html());
			var option = this.control.getMetadata("OPTION");
			view.find("input[name=col1]").val(option.columns[0].field);
			view.find("input[name=col2]").val(option.columns[1].field);
			view.find("input").keyup(function()
			{
				option.columns[0].field = view.find("input").eq(0).val();
				option.columns[1].field = view.find("input").eq(1).val();
				_this.linkViewOption(option);
			});
			this.settingPanel.append(view);
		}
		this.SQL = function()
		{
			var _this = this;
			var view = $($("#TOPTABLESQL").html());
			var option = this.control.getMetadata("OPTION");
			view.find("textarea").val(option.sql).keyup(function()
			{
				option.sql = $(this).val();
			});
			//SQL执行按钮
			view.on("click", ".sql-btn", function()
			{
				var sql = $(view).find("textarea").val();
				queryChartBySql(sql, "table", function(result)
				{
					try
					{
						if (result.state == "true")
						{
							option.rows = result.rows;
							for ( var i in option.columns)
							{
								var column = option.columns[i];
								column.data = result[column.field];
							}
							option.sql = sql;
							_this.linkViewOption(option);
						} else
						{
							$.QuickAlert.alertFail({
								content : result.faultInfo
							});
						}
					} catch (e)
					{
						console.error(e);
					}
				});
			});
			this.settingPanel.append(view);
		}
		this.OPTION = function()
		{
			var _this = this;
		}
		return $.extend(new metadata_view_chart_base(control), this);
	}

	function metadata_form_view_toptable(control)
	{
		this.control = control;
		this.echart = chartTableTop.init($(control).find(".echarts-div")[0]);
		this.OPTION = function(value)
		{
			var total = value.rows;
			$(control).find(".span-text").html("TOP" + total);
			this.echart.setOption(value);
		}
		return $.extend(new metadata_form_view_chart_base(control), this);
	}
</script>

<!-- 控制面板 TOP表格 列配置 -->
<script type="text/html" id="TOPTABLECOLUMNS">
<div class="form-setting-group">
	<table class="setting-control-table">
		<tr class="setting-control-title">
			<td colspan="4">列配置</td>
		</tr>
		<tr>
			<td class="setting-control-label100">第一列字段名</td>
			<td><input name="col1" class="form-control"></td>
			<td class="setting-control-label100">第二列字段名</td>
			<td><input name="col2" class="form-control"></td>
		</tr>
	</table>
</div>
</script>

<!-- 控制面板 TOP表格 SQL配置 -->
<script type="text/html" id="TOPTABLESQL">
<div class="form-setting-group">
	<table class="setting-control-table">
		<tr class="setting-control-title">
			<td>SQL配置</td>
		</tr>
		<tr>
			<td><textarea class='form-control' placeholder="请配置SQL语句"></textarea></td>
		</tr>
		<tr>
			<td><a href="javascript:;" class="btn btn-default btn-sm sql-btn">执行SQL</a></td>
		</tr>
	</table>
</div>
</script>
</div>
